<template>
  <div class="breadcrumb_container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人信息</el-breadcrumb-item>
      <!-- <el-breadcrumb-item>用户列表</el-breadcrumb-item> -->
    </el-breadcrumb>
    <!-- <h3>仍待完善的功能：用el-description学生基本信息展示</h3> -->
    <el-descriptions title="" direction="vertical" :column="4" border style="top:20px">
      <el-descriptions-item label="用户名">{{ username }}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{ phone }}</el-descriptions-item>
      <el-descriptions-item label="居住地" :span="2">{{ address }}</el-descriptions-item>
      <el-descriptions-item label="备注">
        <el-tag size="small">学校</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="联系地址">{{ address }}</el-descriptions-item>
      <el-descriptions-item label="操作">
        <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
          编辑个人信息
        </el-button>
      </el-descriptions-item>
    </el-descriptions>
    <el-drawer
      title="修改信息"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" style="left: 80px;position: absolute">
        <el-form-item label="手机号">
          <el-input v-model="formInline.phone1"></el-input>
        </el-form-item>
        <el-form-item label="居住地">
          <el-input v-model="formInline.address1"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">修改</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <div class="breadcrumb_container cFlex" style="top: 70px; position: relative;">
      <el-table :data="gradeData" style="width: 100%; flex: 1;margin-right: 20px;margin-top: 32px; " border>
        <el-table-column prop="startSemester" label="开课学期" width="180">
        </el-table-column>
        <el-table-column prop="className" label="课程名" width="100">
        </el-table-column>
        <el-table-column prop="classType" label="课程类型" width="180">
        </el-table-column>
        <el-table-column prop="credit" label="学分">
        </el-table-column>
        <el-table-column prop="score" label="成绩">
        </el-table-column>
      </el-table>
      <span style="flex: 1;">
                <el-upload name="image" :auto-upload="false" class="upload-demo" action="http://localhost:/img/upload"
                           :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple
                           :limit="3" :on-exceed="handleExceed">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
                <el-table :data="awardData" style="width: 100%;margin-left: -5px;" border
                          :row-class-name="tableRowClassName">
                    <el-table-column prop="awardName" label="奖项名称" width="180">
                    </el-table-column>
                    <el-table-column prop="adviseScore" label="建议分数" width="180">
                    </el-table-column>
                    <el-table-column prop="time" label="时间">
                    </el-table-column>
                </el-table>

            </span>
    </div>
  </div>

</template>

<script>
export default {
  name: 'Mine',
  data () {
    return {
      username: window.sessionStorage.getItem('stuNum'),
      address: window.sessionStorage.getItem('address'),
      phone: window.sessionStorage.getItem('phone'),
      gradeData: [{
        startSemester: '大三下',
        classType: '专业选修',
        credit: 3,
        score: 84,
        className: '金融工程'
      }],
      awardData: [{
        awardName: '蓝桥杯国家级一等奖',
        adviseScore: 30,
        time: '2022.06.22'
      }],
      drawer: false,
      direction: 'ttb',
      formInline: {
        phone1: '',
        address1: ''
      }
    }


  },
  methods: {
    onSubmit() {
      // console.log('submit!');
      var phone1=this.formInline.phone1
      var address1=this.formInline.address1
      this.$axios.post(`http://localhost:/login/updataMine/${phone1}&${address1}&${window.sessionStorage.getItem("stuNum")}` ).then(res => {
        if (res.status === 200) {
          // console.log(res.data)
          this.$axios.post(`http://localhost:/login/findByName1/${window.sessionStorage.getItem("stuNum")}`).then(res=>{
            this.address=res.data.address
            this.phone=res.data.phone
            alert("修改成功")
          })
        }
        else{
          return '请求失败'
        }
      })
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    }
  },
  tableRowClassName ({
    row,
    rowIndex
  }) {
    if (rowIndex === 1) {
      return 'warning-row'
    } else if (rowIndex === 3) {
      return 'success-row'
    }
    return ''
  },
  handleRemove (file, fileList) {
    console.log(file, fileList)
  },
  handlePreview (file) {
    console.log(file)
  },
  handleExceed (files, fileList) {
    this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
  },
  beforeRemove (file, fileList) {
    return this.$confirm(`确定移除 ${file.name}？`)
  }

  ,

}
</script>

<style scoped>
.breadcrumb_container {
  top: 20px;
}

.cFlex {
  display: flex;
  flex: 2;

}
</style>
